<template>
  <view-box home-component>
    <div slot="header" class="header">
      <search
        @result-click="resultClick"
        @on-change="getResult"
        :results="results"
        v-model="value"
        position="absolute"
        @on-focus="onFocus"
        @on-cancel="onCancel"
        @on-submit="onSubmit"
        ref="search">
      </search>
      <tab>
          <tab-item selected @on-item-click="go('/home/act')">动态</tab-item>
          <tab-item @on-item-click="go('/home/hot')">热门</tab-item>
          <tab-item @on-item-click="go('/home/disc')">发现</tab-item>
      </tab> 
    </div>
    <router-view></router-view>
  </view-box>
</template>

<script>
import "./home.less";
import { ViewBox, XHeader, Search, Tab, TabItem } from "vux";
import _ from '../../libs/utils'

export default {
  components: {
    XHeader,
    Search,
    Tab,
    TabItem,
    ViewBox
  },
  methods: {
    go(path) {
        _.ajax.post({url:"/api/auth/login"});
      //this.$router.push(path);
    },
    resultClick(item) {
      window.alert("you click the result item: " + JSON.stringify(item));
    },
    getResult(val) {
      console.log("on-change", val);
      this.results = val ? getResult(this.value) : [];
    },
    onSubmit() {
      this.$refs.search.setBlur();
      this.$vux.toast.show({
        type: "text",
        position: "top",
        text: "on submit"
      });
    },
    onFocus() {
      console.log("on focus");
    },
    onCancel() {
      console.log("on cancel");
    }
  },
  data() {
    return {
      results: [],
      value: "test"
    };
  }
};
</script>